<template>
  <div>
    <rz-dialog
      :dialogVisible.sync="unitDialogVisible"
      width="80%"
      @oncancel="oncancel"
      title="移除/变更单位"
      @onconfirm="onconfirm"
      confirmName="变 更"
    >
      <el-card shadow="always">
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="4">
            <el-cascader
              :options="optionsArea"
              :props="{
                value: 'areaCode',
                label: 'areaName',
                children: 'children',
                checkStrictly: true,
              }"
              ref="cascader"
              @change="CascaderArea"
              :show-all-levels="false"
              v-model="query.areaCode"
            ></el-cascader>
          </el-col>
          <el-col :span="4">
            <el-cascader
              clearable
              placeholder="请选择单位业态"
              v-model="bodyindustryStr"
              :options="bodyindustryList"
              @change="onCascaderChange"
              :collapse-tags="true"
              :props="{
                checkStrictly: true,
                multiple: true,
                         children:'list',
              label:'bodyIndustryRemarks',
              value:'bodyIndustryRemarks'
              }"
            ></el-cascader>
          </el-col>

          <el-col :span="4">
            <el-select v-model="query.remark" placeholder="请选择总监企业类型">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in [
                  {
                    label: '其他企业(无需设置总监)(仅限市平台单位)',
                    value: '其他企业(无需设置总监)(仅限市平台单位)',
                  },
                ]"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="query.isHaveDirector"
              placeholder="是否有企业负责人"
              clearable
            >
              <el-option
                v-for="item in [
                  {
                    label: '未签署',
                    value: '0',
                  },
                  {
                    label: '已签署',
                    value: '1',
                  },
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="query.isHaveFoodSafetyOfficer"
              placeholder="食品安全员是否签署"
              clearable
            >
              <el-option
                v-for="item in [
                  {
                    label: '未签署',
                    value: '0',
                  },
                  {
                    label: '已签署',
                    value: '1',
                  },
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>

          <el-col :span="4">
            <el-select
              v-model="query.isHaveChiefInspector"
              placeholder="是否有食品安全总监"
              clearable
            >
              <el-option
                v-for="item in [
                  {
                    label: '未签署',
                    value: '0',
                  },
                  {
                    label: '已签署',
                    value: '1',
                  },
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <rz-height></rz-height>
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="6">
            <el-input
              clearable
              maxlength="50"
              v-model="query.identify"
              placeholder="请输入统一社会信用代码/法人身份证号码"
            ></el-input>
          </el-col>
          <el-col :span="4">
            <el-input
              maxlength="50"
              clearable
              v-model="query.newlicenseno"
              placeholder="请输入许可证编号"
            ></el-input>
          </el-col>
          <el-col :span="4">
            <el-input
              clearable
              maxlength="50"
              v-model="query.unitname"
              placeholder="请输入单位名称"
            ></el-input>
          </el-col>
          <el-col :span="4">
            <el-select v-model="query.brisk" placeholder="请选择单位状态">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in [
                  {
                    label: '全部',
                    value: '',
                  },
                  {
                    label: '活跃单位',
                    value: '1',
                  },
                  {
                    label: '不活跃单位',
                    value: '2',
                  },
                ]"
                :key="item.value"
              >
              </el-option>
            </el-select>
          </el-col>

          <el-col :span="4">
            <el-select v-model="query.isPeople" placeholder="请选择单位状态">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in [
                  {
                    label: '单位是否注册',
                    value: '',
                  },
                  {
                    label: '已注册',
                    value: '1',
                  },
                  {
                    label: '未注册',
                    value: '2',
                  },
                ]"
                :key="item.value"
              >
              </el-option>
            </el-select>
          </el-col>

          <el-col :span="2">
            <el-button
              type="primary"
              @click="
                getList();
                query.page = 1;
              "
              >查询</el-button
            ></el-col
          >
        </el-row>
        <rz-height></rz-height>

        <el-row>
          <el-col :span="24">
            <el-table
              border
              ref="multipleTable"
              :data="tableData"
              style="width: 100%"
              stripe
              @select="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column label="区域街道" prop="districtName" width="180">
                <template slot-scope="scope">
                  <div>{{ scope.row.districtName }}--{{ scope.row.streetName }}</div>
                </template>
              </el-table-column>

              <!-- <el-table-column
                label="营业执照名称"
                prop="unitName"
                width="250"
              ></el-table-column> -->
              <el-table-column label="单位名称" width="250" prop="operatorName">
                <template slot-scope="scope">
                  <span>
                    {{
                      scope.row.operatorName ? scope.row.operatorName : scope.row.unitName
                    }}
                  </span>
                </template>
              </el-table-column>

              <!-- <el-table-column
                label="总监企业类型"
                width="180"
                prop="remark"
              ></el-table-column> -->

              <el-table-column label="单位业态" width="200" prop="bodyindustry">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.bodyIndustry
                    }}{{
                      scope.row.bodyIndustryRemarks
                        ? "--" + scope.row.bodyIndustryRemarks
                        : ""
                    }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                width="180"
                label="统一社会信用代码"
                prop="identify"
              ></el-table-column>

              <el-table-column label="许可证编号" width="150" prop="newLicenseNo">
                <template slot-scope="scope">
                  <div>{{ scope.row.newLicenseNo || "--" }}</div></template
                ></el-table-column
              >
              <el-table-column label="企业负责人" width="150" prop="directorName">
                <template slot-scope="scope">
                  <div :class="scope.row.directorName === '未签署' ? 'red' : 'green'">
                    {{ scope.row.directorName }}
                    <span v-if="scope.row.directorSigningDate">
                      ({{ scope.row.directorSigningDate }})</span
                    >
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="食品安全总监" width="150" prop="chiefInspectorName">
                <template slot-scope="scope">
                  <div
                    :class="scope.row.chiefInspectorName === '未签署' ? 'red' : 'green'"
                  >
                    {{ scope.row.chiefInspectorName }}
                    <span v-if="scope.row.chiefInspectorSigningDate">
                      ({{ scope.row.chiefInspectorSigningDate }})</span
                    >
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="食品安全员" width="150" prop="foodSafetyOfficers">
                <template slot-scope="scope">
                  <div
                    :class="scope.row.foodSafetyOfficers === '未签署' ? 'red' : 'green'"
                  >
                    {{ scope.row.foodSafetyOfficers }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              :total="total"
              :page.sync="query.page"
              @pagination="getList"
              v-show="total"
            />
          </el-col>
        </el-row>
      </el-card>
    </rz-dialog>

    <rz-dialog :dialogVisible.sync="dialogVisible" :isShowConfirm="false" :title="title">
      <inspect
        :classification="classification"
        :taskStatus="taskStatus"
        :unId="unId"
        v-if="dialogVisible"
        :clearable="true"
      ></inspect>
    </rz-dialog>
  </div>
</template>
<script>
import {
  groupArea,
  // viseUnitListSuper,
  // exportqueryPeopleInfoNew,
  // sysDicUnitLabel,
  // saveSuperViseUnitLabel,
  findLabelList,
} from "@/api/modules/enterprise";
import { exportGroupMealPilot } from "@/api/modules/coldLink";
import { saveSuperViseUnitLabel } from "@/api/modules/enterprise";
import { updateSuperViseUnitLabel } from "@/api/modules/enterprise";
import { directorEnterpriseReplacement,findSysDicBusiness } from "@/api/modules/enterprise";

export default {
  props: {
    // unitDialogVisible: {
    //   type: Boolean,
    //   value:false
    // },
    areaCode: {
      type: String,
      value: "320500",
    },
    unitData: {
      type: Object,
    },
  },

  name: "archives",
  components: {},
  created() {
    console.log(this.unitData);
    // if (this.$route.query.code) {
    //   this.query.areaCode = this.$route.query.code;
    // } else {
    //   this.query.areaCode = "320500";
    // }
    this.query.areaCode = this.areaCode;
    // this.query.startDateCompletion = this.$moment().format("YYYY-MM-DD");
    // this.query.endDateCompletion = this.$moment().format("YYYY-MM-DD");
    this.getList();
    // this.findUnitBodyIndustryLink();
    this.findAreaListNoParentByParentCode();
    this.findSysDicBusiness()
    // this.unitLabel();
  },

  mounted() {},
  data() {
    return {
      unitDialogVisible: true,
      selectionChangeList: [],
      taskStatus: "1",
      classification: "1",
      title: "",
      unId: "",
      viewData: {},
      dialogVisible: false,
      tableData: [],
      bodyindustryStr: "",
      query: {
        areaCode: "320500",
        bodyindustry: [],
        bodyindustryremarks: [],
        endDateRegistration: "",
        identify: "",
        isAllSigning: "",
        isHaveChiefInspector: "",
        isHaveDirector: "",
        isHaveFoodSafetyOfficer: "",
        isPage: 0,
        labelList: ["特殊总监企业"],
        labelName: "特殊总监企业",
        newlicenseno: "",
        page: 1,
        pageSize: 10,
        sort: "0",
        startDateRegistration: "",
        unitname: "",
        ifOut: "",
        remark: "其他企业(无需设置总监)(仅限市平台单位)",
        brisk: "1",
        isHaveChiefInspector: "",
        isPeople: "",
      },
      // time: "",
      time1: [],
      total: 0,
      // options: [],
      optionsArea: [],
      pickerOptions: {},
      bodyindustryList: [],
    };
  },
  // 方法
  methods: {
                findSysDicBusiness(){
findSysDicBusiness().then((res) => {
        // this.optionsArea = [res.data];
        // console.log(res);
        this.bodyindustryList=res.data
      });
    },
    control(classification, title, unId, taskStatus) {
      this.classification = classification;
      this.title = title;
      this.unId = unId;
      this.taskStatus = taskStatus;
      this.dialogVisible = true;
    },
    // findFoodSafetyClassList(e) {
    //   this.query.pageIndex = e.page;
    //   this.getweiOrder();
    // },
    findAreaListNoParentByParentCode() {
      groupArea({
        params: {
          areaCode: this.query.areaCode,
        },
      }).then((res) => {
        this.optionsArea = [res.data];
      });
    },
    findUnitBodyIndustryLink() {
      this.$http.findUnitBodyIndustryLink({}).then((res) => {
        res.data.forEach((x, index) => {
          x.label = x.bodyIndustry;
          x.value = this.$_.uniqueId();
          if (x.list.length) {
            x.children = x.list.map((x, index) => ({
              label: x,
              value: this.$_.uniqueId(),
            }));
          } else {
            x.children = [{ label: x.bodyIndustry, value: this.$_.uniqueId() }];
          }
        });
        this.options = res.data;
      });
    },
    getList(e) {
      // if (e) {
      //   this.query.pageIndex = 1;
      // }
      findLabelList(this.query).then((res) => {
        this.tableData = res.data;
        this.total = res.totalCount;
      });
    },
    // 分页
    handleCurrentChange(e) {
      this.Page.pagenum = e;
      this.getweiOrder();
    },
    // 分页
    handleSizeChange(e) {
      this.Page.pagesize = e;
      this.getweiOrder();
    },
    // Cascader(e) {
    //   if (e) {
    //     this.query.bodyindustryStr = e[e.length - 1];
    //     this.options.map((x) => {
    //       x.children.map((x) => {
    //         if (x.value == e[e.length - 1]) {
    //           this.query.bodyindustry = x.label;
    //         }
    //       });
    //     });
    //   } else {
    //     this.query.bodyindustryStr = "";
    //     this.query.bodyindustry = "";
    //   }
    // },
    onCascaderChange(e) {
      // ,['食品生产经营者',"餐饮服务经营者","单位食堂","食品销售经营者"])
      if (!e.length) {
        this.query.bodyindustry = [];
        this.query.bodyindustryremarks = [];
      } else {
            this.query.bodyindustryremarks = this.$_.difference(
          this.$_.flattenDeep(e),
         this.bodyindustryList.map(x=>x.bodyIndustryRemarks)
        );
        this.query.bodyindustry = this.$_.intersection(this.$_.flattenDeep(e), this.bodyindustryList.map(x=>x.bodyIndustryRemarks));
        if (
          this.$_.intersection(this.query.bodyindustryremarks,this.bodyindustryList.filter(x=>x.bodyIndustryRemarks=='餐饮服务经营者')[0].list.map(x=>x.bodyIndustryRemarks)).length
        ) {
          this.query.bodyindustry = this.$_.pull(
            this.query.bodyindustry,
            "餐饮服务经营者"
          );
        }
        if (
          this.$_.intersection(this.query.bodyindustryremarks,this.bodyindustryList.filter(x=>x.bodyIndustryRemarks=='集中用餐单位食堂')[0].list.map(x=>x.bodyIndustryRemarks)).length
        ) {
          this.query.bodyindustry = this.$_.pull(
            this.query.bodyindustry,
            "集中用餐单位食堂"
          );
        }

        if (
          this.$_.intersection(this.query.bodyindustryremarks,this.bodyindustryList.filter(x=>x.bodyIndustryRemarks=='食品销售经营者')[0].list.map(x=>x.bodyIndustryRemarks)).length
        ) {
          this.query.bodyindustry = this.$_.pull(
            this.query.bodyindustry,
            "食品销售经营者"
          );
        }
      }

      // console.log(e);
      // if (e.length == 2) {
      //   this.query.bodyindustry = e[0];
      //   this.query.bodyindustryremarks = e[1];
      // } else if (e.length == 1) {
      //   this.query.bodyindustry = e[0];
      //   this.query.bodyindustryremarks = "";
      // } else {
      //   this.query.bodyindustry = "";
      //   this.query.bodyindustryremarks = "";
      // }
    },
    CascaderArea(e) {
      this.query.areaCode = e[e.length - 1];
    },
    // changeScore(e) {
    //   if (e) {
    //     this.query.startindexScore = e.split("-")[0];
    //     this.query.endindexScore = e.split("-")[1];
    //   } else {
    //     this.query.startindexScore = "";
    //     this.query.endindexScore = "";
    //   }
    // },
    // registrationTime(e) {
    //   if (e) {
    //     this.query.startDateRegistration = e[0];
    //     this.query.endDateRegistration = e[1];
    //   } else {
    //     this.query.startDateRegistration = "";
    //     this.query.endDateRegistration = "";
    //   }
    // },
    CompletionTime(e) {
      if (e) {
        this.query.startDateRegistration = e[0];
        this.query.endDateRegistration = e[1];
      } else {
        this.query.startDateRegistration = "";
        this.query.endDateRegistration = "";
      }
    },

    edit(e) {
      this.$confirm("确认移除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        saveSuperViseUnitLabel([
          {
            labelName: "",
            id: e.id,
            type: "总监企业",
            unitName: e.unitName,
            updateName: sessionStorage.getItem("logname"),
            updateDepartment: sessionStorage.getItem("unitName"),
            newLicenseNo: "",
            typeA: "",
            typeAStr: "",
            regionType: "",
          },
        ]).then((res) => {
          this.getList();
        });
      });
    },

    // unitLabel() {
    //   sysDicUnitLabel({
    //     params: {
    //       category: "unit_lable",
    //     },
    //   }).then((res) => {
    //     this.labelData = res.data;
    //   });
    // },

    handleSelectionChange(e, row) {
      this.selectionChangeList = [row];
      // this.selectionChangeList = e.length ? [e[e.length - 1]] : [];
      this.$refs.multipleTable.clearSelection();
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    onconfirm() {
      if (this.selectionChangeList.length == 0) return this.$error("请选择单位");
      directorEnterpriseReplacement({
        ...this.unitData,
        idReplacement: this.selectionChangeList[0].id,
        // "remarkReplacement":  this.selectionChangeList[0].remark,
        unitNameReplacement: this.selectionChangeList[0].unitName,
        updateName: sessionStorage.getItem("logname"),
        updateDepartment: sessionStorage.getItem("unitName"),
      }).then((res) => {
        this.$emit("oncancel", false);
      });
    },
    oncancel() {
      this.$emit("oncancel", false);
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {
    inspect: () => import("@/views/enterprise/components/inspect"),
  },
  // 计算属性
  computed: {},
};
</script>

<style lang="less" scoped>
.right {
  text-align: right;
}
.el-button {
  margin-left: 20px;
}
.el-dropdown-menu {
  height: 600px;
  overflow: auto;
}

::v-deep .el-table__header-wrapper .el-checkbox {
  // display: none;//设置不成功，页面卡顿
  visibility: hidden;
}
.green {
  color: #23890f;
}
.red {
  color: red;
}
</style>
